<template>
    <div id="monitor-result-list">
        <el-row class="chart-bar flex">
            <el-col :span="12">
                <el-card class="flex2 bar">
                    <h3 class="title">
                        <i class="circle-icon"></i>
                        <span>监控规则总览</span>
                        <span style="float: right; padding-right: 50px" v-show="newCalcDate">刷新时间: {{ newCalcDate }}</span>
                    </h3>
                    <div class="title-right">
                        <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                            <i @click="getChartData1" style="z-index: 10" class="el-icon-refresh-right"></i>
                        </el-tooltip>
                    </div>
                    <div style="position: absolute; left: 0; top: 0; height: 100%; width: 100%">
                        <PieChart style="height: 100%; position: absolute; width: 100%" ref="PieChart1" :data="chartData1"> </PieChart>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="flex2 bar">
                    <h3 class="title">
                        <i class="circle-icon"></i>
                        <span>监控数据总览</span>
                        <span style="float: right; padding-right: 50px" v-show="newCalcDate">刷新时间: {{ newCalcDate }}</span>
                    </h3>
                    <div class="title-right">
                        <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                            <i @click="getChartData2" style="z-index: 10" class="el-icon-refresh-right"></i>
                        </el-tooltip>
                    </div>
                    <div style="position: absolute; left: 0; top: 0; height: 100%; width: 100%">
                        <PieChart style="height: 100%; position: absolute; width: 100%" ref="PieChart2" :data="chartData2"> </PieChart>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-card class="flex2 bar" style="height: calc(75% - 10px); margin-top: 10px">
            <h3 class="title">
                <i class="circle-icon"></i>
                <span>监控记录查询</span>
            </h3>
            <RiskTable
                ref="risk-table"
                :tableConfig="tableConfig"
                :tableData="tableData"
                :column="columns"
                :paging="paging"
                :searchParams="searchParams"
                v-loading="tableLoading"
                @page-change="getTableData"
                :key="tableKey"
                style="height: calc(100% - 15px)"
            >
            </RiskTable>
        </el-card>
    </div>
</template>
<script lang="ts">
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import RiskTable from '@/common/components/risk-table-plus.vue';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { ColumnVO, PageVO, TableConfigVO, VueObject } from '@/common/vo';
import { downLoadFile } from '@/utils/request';
import RiskPagination from '@/common/components/risk-pagination.vue';
import { dateFormat, numberFormat, timeFormat } from '@/utils/tools';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import API from '../api/monitor-result';
import { MonitorResultDTO, MonitorResultVO, MonitorResultRepVO } from '../vo/monitor-result';
import RiskTableLayout from '@/common/components/risk-table-layout-plus.vue';
import PieChart from './pie-chart.vue';

const resultTypes = { '0': '异常', '1': '正常' };

@Component({ name: 'MonitorResultList', components: { RiskTable, RiskEntryInput, RiskTableLayout, RiskPagination, RiskIconButton, PieChart } })
export default class MonitorResultList extends Vue {
    searchParams: MonitorResultDTO = {
        ruleId: null,
        ruleName: '',
        resultTypeList: [],
        dtCtUser: '',
        dtMdUser: '',
    };

    paging: PageVO = { currentPage: 1, pageSize: 25, total: 0 };
    tableLoading: boolean = false;
    tableConfig: TableConfigVO = {
        rowKey: 'ruleId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableData: MonitorResultVO[] = [];
    columns: ColumnVO[] = [
        {
            title: '监控规则编码',
            field: 'ruleId',
            sortable: true,
            sortField: 'N_RULE_ID',
            filters: [{ data: '' }],
            filterType: 'search',
            minWidth: 130,
        },
        {
            title: '监控规则名称',
            field: 'ruleName',
            sortable: true,
            sortField: 'C_RULE_NAME',
            filters: [{ data: '' }],
            filterType: 'search',
            minWidth: 150,
        },
        {
            title: '规则状态',
            field: 'resultType',
            sortable: true,
            sortField: 'C_RESULT_TYPE',
            filters: [
                { label: '正常', value: '1' },
                { label: '异常', value: '0' },
            ],
            filterField: 'resultTypeList',
            align: 'center',
            minWidth: 150,
            render: (value, record) => resultTypes[value],
            style: (value, record) => {
                if (value === '1') {
                    return { color: 'green' };
                }
                return { color: 'red' };
            },
        },
        {
            title: '监测时间',
            field: 'newCalcDate',
            align: 'center',
            sortable: true,
            sortField: 'D_DT_CT_DATE',
            minWidth: 120,
            render: (value, record) => dateFormat(value) + ' ' + timeFormat(record.newCalcTime),
        },
        // {
        //     title: '创建人',
        //     field: 'dtCtUserName',
        //     sortable: true,
        //     sortField: 'CTU.C_USER_NAME',
        //     filters: [{ data: '' }],
        //     filterField: 'dtCtUser',
        //     filterType: 'search',
        //     minWidth: 120,
        // },
        // {
        //     title: '创建时间',
        //     field: 'dtCtDate',
        //     align: 'center',
        //     sortable: true,
        //     sortField: 'D_DT_CT_DATE',
        //     minWidth: 120,
        //     render: (value, record) => dateFormat(value) + ' ' + timeFormat(record.dtCtTime),
        // },
        // {
        //     title: '更新人',
        //     field: 'dtMdUserName',
        //     sortable: true,
        //     sortField: 'MDU.C_USER_NAME',
        //     filters: [{ data: '' }],
        //     filterField: 'dtMdUser',
        //     filterType: 'search',
        //     minWidth: 120,
        // },
        // {
        //     title: '更新时间',
        //     field: 'dtMdDate',
        //     align: 'center',
        //     sortable: true,
        //     sortField: 'D_DT_MD_DATE',
        //     minWidth: 120,
        //     render: (value, record) => dateFormat(value) + ' ' + timeFormat(record.dtMdTime),
        // },
        {
            title: '勾稽执行结束时间',
            field: 'endCalDate',
            align: 'center',
            sortable: true,
            sortField: 'D_END_CAL_DATE',
            minWidth: 150,
            render: (value, record) => dateFormat(value) + ' ' + timeFormat(record.endCalTime),
        },
    ];

    chartData1: any = {
        data: [],
        color: ['#95f204', '#d9001b'],
    };

    chartData2: any = {
        data: [],
        color: ['#107fff', '#ed7d31'],
    };

    newCalcDate: string = '';

    async mounted() {
        this.getTableData();
        this.getChartData1();
        this.getChartData2();
        window.addEventListener('resize', this.screenAdapter);
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
    }

    /**
     * 表格数据
     */
    getTableData(): void {
        this.tableLoading = true;
        API.getMonitorResultList({ ...this.searchParams, paging: this.paging })
            .then((res: MonitorResultRepVO) => {
                this.tableData = res?.list || [];
                this.paging.total = res?.total || 0;
                this.tableLoading = false;
            })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    getChartData1(): void {
        API.getMonitorResultChart2().then((res: any) => {
            const data = [
                { name: '正常', value: res.normalCount },
                { name: '异常', value: res.exceptionCount },
            ];
            this.chartData1.data = data;
            if (res.newCalcDate) {
                this.newCalcDate = dateFormat(res.newCalcDate) + ' ' + timeFormat(res.newCalcTime);
            }
        });
    }

    getChartData2(): void {
        API.getMonitorResultChart1().then((res: any) => {
            const data = [
                { name: '正常', value: res.normalCount },
                { name: '异常', value: res.exceptionCount },
            ];
            this.chartData2.data = data;
        });
    }

    /**
     * 标签变动事件
     */
    handleTabChange(): void {
        this.screenAdapter();
        this.getChartData1();
        this.getChartData2();
        this.getTableData();
    }

    screenAdapter() {
        this.$nextTick(() => {
            const ele1 = (this.$refs['PieChart1'] as any).chartInstance;
            const ele2 = (this.$refs['PieChart2'] as any).chartInstance;
            ele1.resize();
            ele2.resize();
        });
    }
}
</script>
<style lang="scss" scoped>
#monitor-result-list {
    height: 100%;
    padding: 0 5px;
    overflow: hidden;

    .title {
        // position: absolute;
        // padding: 10px 0;
        > span {
            padding-left: 25px;
            font-size: 16px;
            font-weight: bold;
        }
    }
}

/***  collapse-tags样式 ***/
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
    width: 63%;
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
    width: 100%;
}
/***  collapse-tags样式 ***/

.chart-bar {
    height: 25%;

    .el-col {
        height: 100%;
    }

    .marquee {
        background-image: linear-gradient(to bottom, #edf8fd, #fef9f2);

        table {
            width: 100%;
            height: 100%;

            /* 固定表头 */
            thead,
            tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
            }

            /* 控制表格滑动 */
            tbody {
                display: block;
                height: calc(100% - 25px);
                overflow-y: scroll;
            }

            /* 隐藏  y轴的滚动条，仍然可以上下滚动 */
            // tbody::-webkit-scrollbar {
            //     display: none;
            // }

            td {
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 13px;
            }

            .num {
                color: #ec808d;
                font-size: 15px;
                cursor: pointer;
            }
        }
    }

    .bar {
        /deep/ .el-card__body {
            position: relative;
        }
    }
}

.search-bar {
    padding: 10px 0;
}

.flex {
    display: flex;
}

.flex1 {
    flex: 1;
}

.flex2 {
    flex: 2;
    margin: 0 5px;
    height: 100%;
}

.flex10 {
    flex: 10;
}

.flex14 {
    flex: 14;
    margin: 5px 0 5px 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */

    .el-button--mini,
    .el-button--mini.is-round {
        padding: 6px 10px !important;
    }
}

.underline {
    text-decoration: underline;
}

.title {
    // position: absolute;
    > span {
        padding-left: 25px;
        font-size: 16px;
        font-weight: bold;
    }
}

.title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 1%;
    top: 10px;
    > i {
        font-size: 22px;
        padding: 0 3px;
        cursor: pointer;
        color: #48c682;
    }

    // i:hover {
    //     color: #107fff;
    // }
    // .total-num {
    //     margin-right: 20px;
    //     color: #fff;
    //     background-color: #578bec;
    //     padding: 5px 15px;
    //     font-size: 14px;
    //     background: url('../../../../pages/system-preserve/images/item-monitor-total.png');
    //     background-size: 100% 30px;
    //     background-repeat: no-repeat;
    // }
    .export-button {
        margin: 0 10px;
        z-index: 10;
    }
    .el-button {
        border-radius: 9px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

a {
    color: #578bec;
    padding: 0 5px;
}

/deep/ .el-card__body {
    padding: 10px;
    height: 100%;
}
</style>
